<template>
    <el-dialog :model-value="props.visible" title="生产单配料申请" @close="handleClose">
        <div id="print-area" ref="printArea">
            <el-form>
                <table class="order-table">
                    <caption>
                        <h3>配料单</h3>
                    </caption>
                    <tr>
                        <td colspan="2">产品名称：</td>
                        <td colspan="2">{{ detail?.bomName }}</td>
                        <td colspan="2">生产数量：</td>
                        <td colspan="2">{{ detail?.produceNumber }}</td>
                    </tr>
                    <tr>
                        <td colspan="2">生产单号：</td>
                        <td colspan="6" class="img-col">
                            <img class="product-image" :src="props.applyIngredientsDetails?.codeUrl" alt="">
                            <div class="order-number">{{ props.applyIngredientsDetails?.bomProductionCode }}</div>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">部件名称</td>
                        <td colspan="2">总需求量</td>
                        <td colspan="2">申请配料数量</td>
                        <td colspan="1">当前库存</td>
                    </tr>
                    <tr v-if="detail?.semiList">
                        <td class="field-title" colspan="2" :rowspan="detail?.semiList.length + 1">半成品</td>
                    </tr>
                    <tr v-for="(item,index) in detail?.semiList" :key="index + 1">
                        <td colspan="2" >
                            {{ `${index+1}.${item?.productName}` }}
                        </td>
                        <td colspan="2" class="inputing-col">
                            <el-form-item>
                                <el-input v-if="formData.semiProduct[index]?.isInput" @dblclick="handleKeyUpEnter('semiProduct',index)" type="number" v-model.number="formData.semiProduct[index].number" placeholder="请输入"></el-input>
                                <el-button text type="success" @dblclick="handleClickApplyNumber('semiProduct',index)" v-else>{{ formData.semiProduct[index]?.number }}</el-button>
                            </el-form-item>
                        </td>
                        <td colspan="2">{{ item?.inventoryNumber }}</td>
                    </tr>
                    <tr v-if="detail?.packingList">
                        <td class="field-title" colspan="2" :rowspan="detail?.packingList.length + 1">包装件</td>
                    </tr>
                    <tr v-for="(item,index) in detail?.packingList" :key="index + 1">
                        <td colspan="2" >
                            {{ `${index+1}.${item?.productName}` }}
                        </td>
                        <td colspan="2" class="inputing-col">
                            <el-form-item>
                                <el-input v-if="formData.package[index]?.isInput" @dblclick="handleKeyUpEnter('package',index)" type="number" v-model.number="formData.package[index].number" placeholder="请输入"></el-input>
                                <el-button text type="success" @dblclick="handleKeyUpEnter('package',index)" v-else>{{ formData.package[index]?.number }}</el-button>
                            </el-form-item>
                        </td>
                        <td colspan="2">{{ item?.inventoryNumber }}</td>
                    </tr>
                    <tr v-if="detail?.auxiliaryList">
                        <td class="field-title" colspan="2" :rowspan="detail?.auxiliaryList.length + 1">通用部件</td>
                    </tr>
                    <tr v-for="(item,index) in detail?.auxiliaryList" :key="index + 1">
                        <td colspan="2" >
                            {{ `${index+1}.${item?.productName}` }}
                        </td>
                        <td colspan="2" class="inputing-col">
                            <el-form-item>
                                <el-input v-if="formData.auxiliary[index]?.isInput" @dblclick="handleKeyUpEnter('auxiliary',index)" type="number" v-model.number="formData.auxiliary[index].number" placeholder="请输入"></el-input>
                                <el-button text type="success" @dblclick="handleKeyUpEnter('auxiliary',index)" v-else>{{ formData.auxiliary[index]?.number }}</el-button>
                            </el-form-item>
                        </td>
                        <td colspan="2">{{ item?.inventoryNumber }}</td>
                    </tr>
                </table>
            </el-form>
            <div class="order-info">
                <el-row>
                    <el-col :span="12">制单人：{{ props.applyIngredientsDetails?.personName }}</el-col>
                    <el-col style="text-align: right" :span="12">制单时间：{{ props.applyIngredientsDetails?.date }}</el-col>
                </el-row>
            </div>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" size="large" @click="handleClickPrint" >打印</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { printApplyIngredientlApi } from '@/api/sj/productManagement/BOMProductOrder'; 

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const props = defineProps<{
    visible: boolean;
    data?: any,
    applyIngredientsDetails: any
}>();
const emits = defineEmits(['close']);
const printArea = ref<HTMLElement | null>(null);

const detail = ref<any>();
const formData = ref<any>({
    semiProduct: [],
    package: [],
    auxiliary: []
});

watch(()=>props.data,(newData)=>{
    detail.value = newData;
    const semiProductData = newData?.semiList.map((item: any)=>{
        return {
            productId: newData.bomId,
            bomProductionId: item.id,
            number: 0,
            isInput: false
        };
    });
    formData.value.semiProduct = [...semiProductData];
    if(newData.packingList){
        const packagetData = newData?.packingList.map((item: any)=>{
            return {
                productId: newData.bomId,
                bomProductionId: item.id,
                number: 0,
                isInput: false
            };
        });
        formData.value.package = [...packagetData];
    };
    const auxiliaryData = newData?.auxiliaryList.map((item: any)=>{
        return {
            productId: newData.bomId,
            bomProductionId: item.id,
            number: 0,
            isInput: false
        };
    });
    formData.value.auxiliary = [...auxiliaryData];
},{deep: true});

const handleClickApplyNumber = (field: any,index: any) => {
    formData.value[field][index].isInput = !formData.value[field][index].isInput
};

const handleKeyUpEnter = (field: any,index: any) => {
    formData.value[field][index].isInput = !formData.value[field][index].isInput
};

const handleClickPrint = async () => {
    // const datasList = [...formData.value.semiProduct, ...formData.value.package, ...formData.value.auxiliary]
    const submitData = {
        id: detail.value.id,
        dataList:[...formData.value.semiProduct, ...formData.value.package, ...formData.value.auxiliary]
    };
    if(printArea.value){
        // 保存当前页面的原始内容
        const originalContent = document.body.innerHTML
        // 获取要打印的内容
        const printContent = printArea.value.innerHTML

        // 替换页面内容为要打印的内容
        document.body.innerHTML = printContent

        // 调用打印
        window.print()

        // 打印后恢复原始内容
        document.body.innerHTML = originalContent
        location.reload() // 可选：刷新页面以恢复事件监听
    };
    const { code } = await printApplyIngredientlApi(submitData);
    if(code == 200){
        proxy?.$modal.msgSuccess('打印完成');
    }
};

const handleClose = () => {
    // formData.value = {
    //     semiProduct: [],
    //     package: [],
    //     auxiliary: []
    // };
    emits('close');
    console.log('close');
};
</script>

<style lang="scss" scoped>
#print-area{
    display: flex;
    justify-content: center;
    flex-flow:wrap
}
.el-form{
    width: 100%;
    display: flex;
    justify-content: center;
}
.order-table{
    border-spacing: 0;
    border: 1px solid black;
    width: 90%;
    font-size: 20px;
    tr{
        border: 1px solid black;
    }
    td{
        border: 1px solid black;
        text-align: center;
    }
    .img-col{
        text-align: center;
        .product-image{
            height: 250px;
        }
        .order-numbe{
            color: blue
        }
    }
    .not-center{
        text-align: left;
    }
    .code-image{
        height: 100px
    }
    .inventory-alert{
        color: red;
    }
    .field-title{
        font-weight: bold;
    }
    .auxiliary-name{
        display: flex;
        justify-content: space-between;
        span{
            display: block
        }
    }
    .inputing-col{
        display: flex;
        justify-content: center;
        align-items: center;
        .inputing-col{
            display: flex;
            align-items: center;
        }
    }
}
.order-info{
    width: 90%;
    font-size: 15px;
}
</style>